<template>
  <div id="blogArticleItem">
    <el-card class="item-card" body-style="padding: 0">
      <img :src="articleCover" class="article-card-image" />
      <div style="padding: 12px">
        <div class="type-list">
          <div
            class="type-content"
            v-for="type in articleInfo.type"
            :key="type"
          >
            <a href="javascript:" @click="loadArticleByType">{{ type }}</a>
          </div>
        </div>
        <div class="basic-info">
          <img class="author-avatar" :src="authorAvatar" @click="toUserInfo" />
          <span class="article-author" @click="toUserInfo"
            >作者: {{ articleInfo.username }}</span
          >
          <h3 class="article-date">
            {{ articleInfo.created_at | formatDate }}
          </h3>
          <h2 class="article-title">{{ articleInfo.title }}</h2>
        </div>
        <article class="article-abstract">{{ articleInfo.abstract }}</article>
      </div>
      <div class="other-info">
        <div class="other-info-content" v-if="articleInfo.editing != 1">
          <a href="javascript:"><i class="el-icon-chat-dot-round"></i> 0</a>
        </div>
        <div
          class="other-info-content"
          v-if="articleInfo.editing != 1 && !inManager"
        >
          <a href="javascript:" @click="thumbsUp"
            ><i
              :class="[clickState ? 'el-icon-liked' : 'el-icon-like']"
              ref="thumbs"
            ></i>
            {{ articleInfo.likes }}</a
          >
        </div>
        <div class="other-info-content">
          <a href="javascript:" @click="toArticleDetail"
            ><i class="el-icon-more"></i> 查看详情</a
          >
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { api } from "@/api";
import { StoreHandler } from "@/store";
export default {
  data() {
    return {
      username: "",
      clickState: false,
    };
  },
  props: ["articleInfo"],
  computed: {
    authorAvatar() {
      return (
        "/api/" +
        api.user.getAvatar(this.articleInfo.username).url +
        `?${Math.random()}`
      );
    },
    articleCover() {
      return (
        "/api/" +
        api.article.getCover1(this.articleInfo.id).url +
        `?${Math.random()}`
      );
    },
    inManager() {
      return this.$route.path == "/manager" ? true : false;
    },
  },
  filters: {
    formatDate(input) {
      return new Date(input).format("yyyy-MM-dd");
    },
  },
  methods: {
    async thumbsUp() {
      if (this.clickState) {
        this.$notify.info({
          message: "只能点一次赞哦",
          offset: 60,
        });
        return;
      }
      await this.$axios(api.article.thumbsUp(this.articleInfo.id));
      this.articleInfo.likes = this.articleInfo.likes + 1;
      this.clickState = true;
    },
    loadArticleByType(e) {
      const type = e.target.innerText;
      this.$emit("load-article-by-type", type);
    },
    toArticleDetail() {
      this.$router.push({
        path: "/articleDetail",
        query: { id: this.articleInfo.id },
      });
    },
    toModifyArticle() {
      this.$router.push({
        path: "/editor",
        query: { id: this.articleInfo.id },
      });
    },
    toUserInfo() {
      let userInfo = StoreHandler.getters.getUserInfo();
      if (userInfo) {
        this.$router.push({
          path: "/otherUser",
          query: { username: this.articleInfo.username },
        });
      } else {
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style lang="less" scoped>
#blogArticleItem {
  padding: 15px 0;
  width: 100%;
  .item-card {
    min-height: 330px;
    position: relative;
    border: 0;
    .type-list {
      line-height: 27px;
      .type-content {
        display: inline;
        margin: 0 5px;
        a,
        a::before,
        a::after {
          font-size: 20px;
          content: "#";
          text-decoration: none;
          color: rgb(119, 109, 255);
        }
      }
    }
    .article-card-image {
      width: 100%;
      height: 100px;
      object-fit: cover;
    }
    .article-abstract {
      text-indent: 20px;
      font-size: 14px;
      margin-top: 10px;
    }
    .basic-info {
      padding: 10px;
      min-height: 50px;
      .author-avatar {
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: inline;
        cursor: pointer;
      }
      .article-date {
        margin-left: 55px;
        font-size: 12px;
        color: darkgray;
        display: inline;
        margin: 0;
      }
      .article-author {
        font-size: 16px;
        font-weight: bold;
        margin-left: 55px;
        display: inline;
        cursor: pointer;
      }
      .article-title {
        margin: 0 0 0 55px;
        position: absolute;
      }
    }
    .other-info {
      position: absolute;
      width: 100%;
      background: rgba(rgb(233, 233, 233), 0.3);
      height: 35px;
      bottom: 0;
      display: flex;
      .other-info-content {
        line-height: 35px;
        flex: 1;
        text-align: center;
        border: 1px solid #e3e8e8;
      }
      .other-info-content a {
        text-decoration: none;
        color: #635f5f;
      }
    }
  }
}
</style>
